<style>
    .round {
        margin: 5px 0 0 0 !important;
        padding: 5px 8px 5px 8px !important;
        -moz-border-radius: 25px !important; /* Gecko browsers */
        -webkit-border-radius: 25px !important; /* Webkit browsers */
        border-radius: 25px !important; /* W3C syntax */
        /*-moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        border-radius: 50% !important;*/
    }

    .running {
        border: solid 5px #eee;
        box-shadow: 3px 5px 5px #aaa;
    }

    .btn-xxs {
        padding: 5px 3px 7px 3px !important;
        font-size: 2px !important;
        line-height: 1px !important;
    }

    .btn-round {
        -moz-border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        border-radius: 50% !important;
    }
</style>
<section class="content-header">
    <h1>&nbsp;</h1>
    <ol class="breadcrumb pull-left" style="left:10px;">
        <li><a href="javascript:void(0);"><i class="fa fa-dashboard"></i>
            环境配置</a></li>
        <li class="active">{{env.name}}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="form-horizontal  " style="margin-top :30px;">
                        <div class="input-group col-lg-1 pull-left"
                             style=" ">
                            <div class="input-group-btn">
                                <button type="button" class="btn">当前环境</button>
                            </div>
                            <!-- /btn-group -->
                            <select data-ng-model="env.name" class="form-control"
                                    style="margin-right:20px;width:180px;"
                                    ng-change="changeEnv()"
                                    ng-options="option as option for option in envNames">
                            </select>
                        </div>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="margin-top:20px;">

                    <ul id="myTab" class="nav nav-tabs">
                        <li class="" data-ng-repeat="area in env.areas"
                            ng-class="{true:'active',false:''}[$index==0]">
                            <a href="javascript:#{{'area'+$index}}" data-toggle="tab">
                                {{area.alias}} &nbsp;
                                <i class="glyphicon glyphicon-remove-sign" style="color: red"
                                   data-ng-click="minusArea()"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" data-ng-click="openAddEnvAreaModal('md')">
                                添加区域
                                <i class="glyphicon glyphicon-plus-sign" style="color: green;"/>
                            </a>


                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content" style="margin:20px 0 0 0 ;">
                        <div class="tab-pane fade" id="{{'area'+$index}}"
                             data-ng-repeat="area in env.areas"
                             ng-class="{true:'in active',false:''}[$index==0]">
                            <form name="envForm{{$index}}" ng-submit="saveServerAreaConfig(checkPorts())" validate>
                                <div class="panel-group" id="accordion">
                                    <div class="panel panel-primary"
                                         style="margin-bottom: 15px;">
                                        <div class="panel-heading" style=""
                                             data-ng-click="toggle('area'+$index+'tasks')">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion">
                                                    应用
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="area{{$index}}tasks" class="panel-collapse collapse in">
                                            <div class="panel-body">
                                                <div class="row form-horizontal">
                                                    <div class="form-group" style="margin: 0 0 0 50px;">
                                                        <label class=" control-label  "
                                                               style="float:left;">使用跳板机</label>
                                                        <div class=" col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                                            <switch data-ng-model="area.useJumpServer"></switch>
                                                        </div>
                                                        <div class="input-group  input-group-sm"
                                                             style=" ">
                                                            <div class="input-group-btn">
                                                                <button type="button" class="btn  btn-sm">跳板机IP</button>
                                                            </div>
                                                            <!-- /btn-group -->
                                                            <select data-ng-model="area.jumpServerIp"
                                                                    class="form-control"
                                                                    style="margin-right:20px;width:180px;"
                                                                    ng-options="n.ip as n.name for n in jumpServerList">
                                                            </select>
                                                            <button class="btn btn-default btn-sm"
                                                                    ng-disabled="area.status=='running'" type="submit"
                                                                    id="btnSave{{$index}}">
                                                                <span class="glyphicon glyphicon-save"></span>
                                                                <font>保存</font>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <table class="table table-bordered" style="margin-top: 10px;">
                                                    <thead>
                                                    <tr>
                                                        <th width="1%">分组</th>
                                                        <th width="4%">应用</th>
                                                        <th width="3%">IP</th>
                                                        <th width="3%">应用类型</th>
                                                        <th width="2%">应用端口</th>
                                                        <th width="2%">jmx端口</th>
                                                        <th width="2%">agent端口</th>
                                                        <th width="2%">流量控制</th>
                                                        <th width="2%">xx用户</th>
                                                        <th width="2%">ssh端口</th>
                                                        <th width="5%">配置路径</th>
                                                        <th width="5%">服务器路径/工程放置目录</th>
                                                        <th width="5%">jdk路径</th>
                                                        <th width="3%"></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr class="item" data-ng-repeat="task in area.tasks">
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.groupArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <select ng-show="task.editable||task.modifiable"
                                                                    data-ng-model="task.group" class="form-control"
                                                                    id="groupArea{{$parent.$index}}Task{{$index}}"
                                                                    name="groupArea{{$parent.$index}}Task{{$index}}"
                                                                    style="margin-right:20px;width:80px;"
                                                                    ng-options="option as option for option in area.groups"
                                                                    required>
                                                            </select>
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.group}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.nameArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <select ng-show="task.editable||task.modifiable"
                                                                    class="form-control" data-ng-model="task.name"
                                                                    id="nameArea{{$parent.$index}}Task{{$index}}"
                                                                    name="nameArea{{$parent.$index}}Task{{$index}}"
                                                                    ng-options="option1 as option1 for option1 in projectNames"
                                                                    required>
                                                            </select>
                                                            <!--valid-pop
                                                                    valid-pop-show="!envForm['nameArea'+$parent.$index+'Task'+$index].$valid"
                                                                    valid-pop-options='请选择一个应用'-->
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.name}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.ipArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <input ng-show="task.editable||task.modifiable" type="text"
                                                                   class="form-control" data-ng-model="task.ip"
                                                                   id="ipArea{{$parent.$index}}Task{{$index}}"
                                                                   name="ipArea{{$parent.$index}}Task{{$index}}"
                                                                   required>
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.ip}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.typeArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <select ng-show="task.editable||task.modifiable"
                                                                    class="form-control" data-ng-model="task.type"
                                                                    id="typeArea{{$parent.$index}}Task{{$index}}"
                                                                    name="typeArea{{$parent.$index}}Task{{$index}}"
                                                                    ng-options="option as option for option in types"
                                                                    required>
                                                            </select>
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.type}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.httpPortArea{{$parent.$index}}Task{{$index}}.$valid&&checkHttpPort()]">
                                                            <div ng-if="task.type == 'tomcat'||task.type == 'php'||task.type == 'spring_boot_jar'">
                                                                <input ng-show="task.editable||task.modifiable"
                                                                       type="number" class="form-control"
                                                                       data-ng-model="task.httpPort"
                                                                       min="1" max="65536"
                                                                       id="httpPortArea{{$parent.$index}}Task{{$index}}"
                                                                       name="httpPortArea{{$parent.$index}}Task{{$index}}"
                                                                       valid-pop
                                                                       check-repeat-show="!checkHttpPort(envForm$parent.$index)&&(task.editable||task.modifiable)"
                                                                       check-repeat-options="应用端口冲突"
                                                                       required>
                                                                <span ng-show="!(task.editable||task.modifiable)"
                                                                      valid-pop
                                                                      check-repeat-show="!checkHttpPort(envForm$parent.$index)&&!task.editable"
                                                                      check-repeat-options="应用端口冲突">{{task.httpPort}}</span>
                                                            </div>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.jmxPortArea{{$parent.$index}}Task{{$index}}.$valid&&checkJmxPort()]">
                                                            <div ng-if="task.type == 'tomcat' || task.type == 'spring_boot_jar'">
                                                                <input ng-show="task.editable||task.modifiable"
                                                                       type="number" class="form-control"
                                                                       data-ng-model="task.jmx_port"
                                                                       min="0" max="65536"
                                                                       id="jmxPortArea{{$parent.$index}}Task{{$index}}"
                                                                       name="jmxPortArea{{$parent.$index}}Task{{$index}}"
                                                                       valid-pop
                                                                       check-repeat-show="!checkJmxPort(envForm$parent.$index)&&(task.editable||task.modifiable)"
                                                                       check-repeat-options="jmx端口冲突">
                                                                <span ng-show="!(task.editable||task.modifiable)"
                                                                      valid-pop
                                                                      check-repeat-show="!checkJmxPort(envForm$parent.$index)&&!task.editable"
                                                                      check-repeat-options="jmx端口冲突">{{task.jmx_port}}</span>
                                                            </div>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.agentPortArea{{$parent.$index}}Task{{$index}}.$valid&&checkAgentPort()]">
                                                            <div ng-if="task.type == 'php'">
                                                                <input ng-show="task.editable||task.modifiable"
                                                                       type="number" class="form-control"
                                                                       data-ng-model="task.agent_port"
                                                                       min="1" max="65536"
                                                                       id="agentPortArea{{$parent.$index}}Task{{$index}}"
                                                                       name="agentPortArea{{$parent.$index}}Task{{$index}}"
                                                                       valid-pop
                                                                       check-repeat-show="!checkAgentPort(envForm$parent.$index)&&(task.editable||task.modifiable)"
                                                                       check-repeat-options="agent端口冲突">
                                                                <span ng-show="!(task.editable||task.modifiable)"
                                                                      valid-pop
                                                                      check-repeat-show="!checkAgentPort(envForm$parent.$index)&&!task.editable"
                                                                      check-repeat-options="agent端口冲突">{{task.agent_port}}</span>
                                                            </div>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.isResourceArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <select ng-show="task.editable||task.modifiable"
                                                                    class="form-control"
                                                                    data-ng-model="task.is_resource"
                                                                    id="isResourceArea{{$parent.$index}}Task{{$index}}"
                                                                    name="isResourceArea{{$parent.$index}}Task{{$index}}"
                                                            >
                                                                <option value="0">是</option>
                                                                <option value="1">否</option>
                                                            </select>
                                                            <span ng-show="!(task.editable||task.modifiable)">
                                                                <span ng-if="task.is_resource==0">是</span>
                                                                <span ng-if="task.is_resource==1">否</span>
                                                            </span>
                                                        </td>
                                                        <td style="word-break:break-all;">
                                                            <input type="text" required ng-model="task.dstUser"
                                                                   ng-show="(task.editable||task.modifiable) && (task.type == 'php' || task.type == 'ant_android')">
                                                            <span ng-hide="(task.editable||task.modifiable) && (task.type == 'php' || task.type == 'ant_android')">{{task.dstUser}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.portArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <input ng-show="task.editable||task.modifiable"
                                                                   type="number" class="form-control"
                                                                   data-ng-model="task.port"
                                                                   min="1" max="65536"
                                                                   id="portArea{{$parent.$index}}Task{{$index}}"
                                                                   name="portArea{{$parent.$index}}Task{{$index}}"
                                                                   required>
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.port}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.configPathArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <div ng-if="task.type == 'tomcat'||task.type == 'php' || task.type == 'spring_boot_jar'">
                                                                <input ng-show="task.editable||task.modifiable"
                                                                       type="text" class="form-control"
                                                                       data-ng-model="task.configPath"
                                                                       id="configPathArea{{$parent.$index}}Task{{$index}}"
                                                                       name="configPathArea{{$parent.$index}}Task{{$index}}"
                                                                       required>
                                                                <span ng-show="!(task.editable||task.modifiable)">{{task.configPath}}</span>
                                                            </div>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.serverPathArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <input ng-show="task.editable||task.modifiable" type="text"
                                                                   class="form-control" data-ng-model="task.serverPath"
                                                                   id="serverPathArea{{$parent.$index}}Task{{$index}}"
                                                                   name="serverPathArea{{$parent.$index}}Task{{$index}}"
                                                                   required>
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.serverPath}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;" ng-if="task.type == 'tomcat'"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.javaHomeArea{{$parent.$index}}Task{{$index}}.$valid]">
                                                            <input ng-show="(task.editable||task.modifiable)"
                                                                   type="text" class="form-control"
                                                                   data-ng-model="task.javaHome"
                                                                   id="javaHomeArea{{$parent.$index}}Task{{$index}}"
                                                                   name="javaHomeArea{{$parent.$index}}Task{{$index}}"
                                                                   required>
                                                            <span ng-show="!(task.editable||task.modifiable)">{{task.javaHome}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-if="task.type != 'tomcat'"></td>
                                                        <td>
                                                            <button class=" btn btn-primary"
                                                                    ng-click="setModifiable('task');" type="button">
                                                                <span class="glyphicon glyphicon-edit"></span></button>
                                                            <button class=" btn btn-danger" ng-click="removeTask();"
                                                                    type="button"><span
                                                                    class="glyphicon glyphicon-minus"></span></button>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                                <i class="glyphicon glyphicon-plus-sign"
                                                   style="color: green;font-size: 28px" ng-click="addTask();"
                                                   type="button"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-primary"
                                         style="margin-bottom: 15px;">
                                        <div class="panel-heading" style=""
                                             data-ng-click="toggle('area'+$index+'duboos')">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion">
                                                    dubbo
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="area{{$index}}duboos" class="panel-collapse collapse in">
                                            <div class="panel-body">
                                                <table class="table table-bordered" style="margin-top: 10px;">
                                                    <thead>
                                                    <tr>
                                                        <th width="10%">IP</th>
                                                        <th width="10%">端口</th>
                                                        <th width="10%">用户名</th>
                                                        <th width="10%">密码</th>
                                                        <th width="10%"></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr class="item" data-ng-repeat="dubbo in area.dubboList">
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.dubboIpArea{{$parent.$index}}Dubbo{{$index}}.$valid]">
                                                            <input ng-show="dubbo.editable||dubbo.modifiable"
                                                                   type="text" class="form-control"
                                                                   data-ng-model="dubbo.dubboIp"
                                                                   id="dubboIpArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   name="dubboIpArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   required>
                                                            <span ng-show="!(dubbo.editable||dubbo.modifiable)">{{dubbo.dubboIp}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.dubboPortArea{{$parent.$index}}Dubbo{{$index}}.$valid&&checkDubboPort()]">
                                                            <input ng-show="dubbo.editable||dubbo.modifiable"
                                                                   type="number" class="form-control"
                                                                   data-ng-model="dubbo.dubboPort"
                                                                   min="1" max="65536"
                                                                   id="dubboPortArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   name="dubboPortArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   valid-pop
                                                                   check-repeat-show="!checkDubboPort(envForm$parent.$index)&&(dubbo.editable||dubbo.modifiable)"
                                                                   check-repeat-options="dubbo端口冲突"
                                                                   required>
                                                            <span ng-show="!(dubbo.editable||dubbo.modifiable)"
                                                                  valid-pop
                                                                  check-repeat-show="!checkDubboPort(envForm$parent.$index)&&!(dubbo.editable||dubbo.modifiable)"
                                                                  check-repeat-options="dubbo端口冲突">{{dubbo.dubboPort}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.userNameArea{{$parent.$index}}Dubbo{{$index}}.$valid]">
                                                            <input ng-show="dubbo.editable||dubbo.modifiable"
                                                                   type="text" class="form-control"
                                                                   data-ng-model="dubbo.userName"
                                                                   id="userNameArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   name="userNameArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   required>
                                                            <span ng-show="!(dubbo.editable||dubbo.modifiable)">{{dubbo.userName}}</span>
                                                        </td>
                                                        <td style="word-break:break-all;"
                                                            ng-class="{true:'has-success',false:'has-error'}[envForm{{$parent.$index}}.userPassArea{{$parent.$index}}Dubbo{{$index}}.$valid]">
                                                            <input ng-show="dubbo.editable||dubbo.modifiable"
                                                                   type="text" class="form-control"
                                                                   data-ng-model="dubbo.userPass"
                                                                   id="userPassArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   name="userPassArea{{$parent.$index}}Dubbo{{$index}}"
                                                                   required>
                                                            <span ng-show="!(dubbo.editable||dubbo.modifiable)">{{dubbo.userPass}}</span>
                                                        </td>

                                                        <td>
                                                            <button class=" btn btn-primary"
                                                                    ng-click="setModifiable('dubbo');" type="button">
                                                                <span class="glyphicon glyphicon-edit"></span></button>
                                                            <button class=" btn btn-danger" ng-click="removeDubbo();"
                                                                    type="button"><span
                                                                    class="glyphicon glyphicon-minus"></span></button>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                                <i class="glyphicon glyphicon-plus-sign"
                                                   style="color: green;font-size:28px" ng-click="addDubbo();"
                                                   type="button"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <script type="text/ng-template" id="AddEnvAreaModal.html">
        <form name="addEnvAreaForm" ng-submit="ok(addEnvAreaForm.$valid&&checkAlias()&&checkAreaName()&&checkCode())"
              validate>
            <div class="modal-header">
                <h3 class="modal-title">添加区域</h3>
            </div>
            <div class="modal-body">
                <div class="form-horizontal" role="form">
                    <div class="form-group"
                         ng-class="{true:'has-success',false:'has-error'}[addEnvAreaForm.areaName.$valid&&checkAreaName()]">
                        <label for="areaName" class="col-sm-3 control-label">区域名</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="areaName" data-ng-model="areaName"
                                   style="width:168px;"
                                   ng-pattern="/^[0-9a-zA-Z_]+$/" name="areaName"
                                   valid-pop
                                   valid-pop-show="addEnvAreaForm.areaName.$invalid"
                                   valid-pop-options='区域名由字母、数字或下划线组成'
                                   data-placement="right"
                                   check-repeat-show="!checkAreaName()"
                                   check-repeat-options="该区域名已存在"
                                   placeholder="请输入区域名" required>
                        </div>
                    </div>
                    <div class="form-group"
                         ng-class="{true:'has-success',false:'has-error'}[addEnvAreaForm.areaAlias.$valid&&checkAlias()]">
                        <label for="areaAlias" class="col-sm-3 control-label">别名(页面显示)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="areaAlias" data-ng-model="areaAlias"
                                   style="width:168px;" name="areaAlias"
                                   valid-pop
                                   valid-pop-show="false"
                                   valid-pop-options=''
                                   data-placement="right"
                                   check-repeat-show="!checkAlias()"
                                   check-repeat-options="该别名已存在"
                                   placeholder="请输入别名" required>
                        </div>
                    </div>
                    <div class="form-group"
                         ng-class="{true:'has-success',false:'has-error'}[addEnvAreaForm.zoneCode.$valid&&checkCode()]">
                        <label for="zoneCode" class="col-sm-3 control-label">区域代号(zone_code)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="zoneCode" data-ng-model="zoneCode"
                                   style="width:168px;" name="zoneCode"
                                   valid-pop
                                   valid-pop-show="false"
                                   valid-pop-options=''
                                   data-placement="right"
                                   check-repeat-show="!checkCode()"
                                   check-repeat-options="该代号已存在"
                                   placeholder="请输入代号" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="submit">OK</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </form>
    </script>
</section>